<template>
	<div class="main">

		<div class="indResultWrap">
			<div class="toper">
				<go-back aa='../evaluation/evaluationEntry'></go-back>
				<div class="flex-h pagination-box">
					<span class="titlesp">共有{{resultTitleData.length}}条测试结果</span>
					<div class="flex1 bullet-box">
						<div class="swiper-pagination"></div>
					</div>
				</div>

			</div>
			<scroller style="top:1.5rem;">
				<div class="swipBoxWrap">
					<!-- <div v-if="types===4" id="echart" style="position: absolute;top: 3rem;left: 0.75rem;z-index: 10;"></div> -->
					<div class="swiper-container" id="swiper1">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(itemResult,index) in resulrData" :key="index">
								<div class="indResulWrap">
									<div class="resulWrap">
										<div class="resulbox">
											<div class="textResutTile">
												<span class="sp1">测试结果</span>
											</div>
											<div class="titleBox">
												<i>{{types===1?"您的职业兴趣类型是":types===2?"您的职业价值观类型是":types===3?"您的MBTI性格类型是":types===4?"您的多元智能类型是":"您的家庭成长环境类型是"}}</i>
												<b>{{resultTitleData[index]}}</b>

											</div>
											<div v-if="types===1">
												<div style="height: 5rem;">
													<div v-if="swiperIndex==index" :id="swiperIndex==index?'echart':'sser'"></div>
												</div>
											</div>
											<div v-if="types===2">
												<div class="outerBarBox">
													<div class="flex-h test2Box">
														<div class="sp1">
															<span v-for="(item,indexs) in zyjzgResult" :key='indexs'>{{item}}</span>
														</div>
														<div class="sp2 flex1">
															<div class="sp2_2" v-for="(its,$indexs) in zyjzgScore" :key='$indexs+20'>
																<span v-bind:style="{'width':its*0.25+'rem'}"></span>
															</div>

														</div>

													</div>
													<div class="flex-h test2bot">
														<div class="sp1"></div>
														<div class="sp2 flex1">
															<div class="flex-h sp2_score">
																<span class="flex1">2</span>
																<span class="flex1">4</span>
																<span class="flex1">6</span>
																<span class="flex1">8</span>
																<span class="flex1">10</span>
																<span class="flex1">12</span>
																<span class="flex1">14</span>
																<span class="flex1">16</span>
																<span class="flex1">18</span>
																<span class="flex1">20</span>

															</div>

														</div>
													</div>
												</div>

											</div>
											<div v-if="types===3" class="mbti-box">
												<div class="mbti-bar flex-h" v-for="(n,$index) in mbtiDatas" :key="$index">
													<div class="flex1 left barsp">
														<div><span class="flex-h leftsp"><b class="flex1">{{n.leftType}}</b><i class="flex1">{{n.leftScore}}</i><em><strong
																	 :class="n.leftScore>n.rightScore?'active':''" v-bind:style="{'width':(n.leftScore)*0.1+'rem'}"></strong></em></span></div>
													</div>
													<div class="flex1 right barsp">
														<div><span class="flex-h leftsp"><em><strong :class="n.rightScore>n.leftScore?'active':''" v-bind:style="{'width':(n.rightScore)*0.1+'rem'}"></strong></em><i
																 class="flex1">{{n.rightScore}}</i><b class="flex1">{{n.rightType}}</b></span></div>
													</div>
												</div>

											</div>
											<div v-if="types===4" style="height: 5rem;">

												<div v-if="swiperIndex==index" :id="swiperIndex==index?'echart':'sser'"></div>


											</div>
											<div v-if="types===5">

												<div style="height: 5rem;">
													<div v-if="swiperIndex==index" :id="swiperIndex==index?'echart':'sser'"></div>
												</div>

												<div class="result5Wrap flex-h">
													<div class="flex1 coBgSp bgsp1">
														<i>家庭接纳</i>
														<span class="sp1 cosp">
															<em>{{score[0]}}分</em><b>慈爱</b>
														</span>
														<span class="sp2 cosp">
															<em>{{score[1]}}分</em><b>随意</b>
														</span>

													</div>
													<div class="flex1 coBgSp bgsp2">
														<i>家庭回避</i>
														<span class="sp1 cosp">
															<em>{{score[2]}}分</em><b>忽视</b>
														</span>
														<span class="sp2 cosp">
															<em>{{score[3]}}分</em><b>拒绝</b>
														</span>
													</div>
													<div class="flex1 coBgSp bgsp3">
														<i>家庭过度关心</i>
														<span class="sp1 cosp">
															<em>{{score[4]}}分</em><b>过度要求</b>
														</span>
														<span class="sp2 cosp">
															<em>{{score[5]}}分</em><b>过度保护</b>
														</span>
													</div>
												</div>

											</div>
										</div>
									</div>
									<div class="resulWrap" style="margin-top: 0.3rem;">
										<div class="resultTxtBox">
											<span class="titlesp">
												<i></i>
												<b>结果说明</b>
											</span>
											<div class="pBox">
												<p class="pp1">{{itemResult.explain}}</p>
											</div>
											<span class="titlesp">
												<i></i>
												<b>推荐专业</b>
											</span>
											<div class="pBox">
												<span class="pptitle">优先推荐</span>
												<p class="pp1" style="margin-bottom: 0.1rem;" v-for="(its,index) in itemResult.first" :key="index">{{its.category}}:{{its.major}}</p>
												<span class="pptitle">次级推荐</span>
												<p class="pp1" v-for="(its,index) in itemResult.second" :key="index+100">{{its.category}}:{{its.major}}</p>
											</div>
											<span class="titlesp" v-if="types!==2">
												<i></i>
												<b>职业特征</b>
											</span>
											<div class="pBox" v-if="types!==2">

												<p class="pp1">{{itemResult.feature }}</p>

											</div>
											<span class="titlesp"> 
												<i></i>
												<b>典型职行业</b>
											</span>
											<div class="pBox">
												<p class="pp1">{{itemResult.profession}}</p>
											</div> 
										 	<span class="titlesp"> 
												<i></i>
												<b>专家建议</b>
											</span>
											<div class="pBox">
												<p class="pp1">{{itemResult.suggest }}</p>
											</div> 
										</div>

									</div>
									<div style="width: 100%;height: 1.5rem;"></div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</scroller>


		</div>
	</div>
</template>
<script>
	import ls from 'store2';
	import 'swiper/dist/css/swiper.css';
	import Swiper from 'swiper/dist/js/swiper.js';
	import { saveSingle, getResult } from "~/api/evaluation";
	import goBack from '~/components/goBack'
	import echarts from '@/plugins/echarts'
	export default {
		head: {
			title: '生涯测评'
		},
		components: {
			goBack,
			// specIssue
		},
		data() {
			return {		
				preUrl: ls.get('preUrl'),
				result: '',
				tabNum: 0,
				types: 0,
				numberSet: {
					numR: 0,
					numS: 0,
					numI: 0,
					numE: 0,
					numA: 0,
					numC: 0
				},
				zyjzgResult: [],
				zyjzgScore: [],
				mbtiDatas: [],
				grownScore: [],
				resulrData: [],
				resultTitleData: [],
				swiperIndex: 0,
				icator: [{text: 'R型',max: 42},{text: 'S型',max: 42},{text: 'I型',max: 42},	{text: 'E型',max: 42},{text: 'A型',max: 42},{text: 'C型',max: 42}],
				icatorxz:[{text: '语言文字智能',max: 21},{text: '数理逻辑智能',max: 21},{text: '视觉空间智能',max: 21},{text: '自然观察智能',max: 21},
				{text: '音乐节奏智能',max: 21},{text: '身体律动智能',max: 21},{text: '人际社交智能',max: 21},{text: '个人内省智能',max: 21}]

			}
		},
		created() {
			this.commonJs.gologins();
			let parameter = ls.get('resultPar')
			this.stat = parameter.status;
			this.types = this.stat * 1;
			this.score = parameter.worthScore //正式
		
		},
		mounted: function() {
			//典型职行业去掉 专家建议隐藏
			
			let stats = this.stat * 1;
			let score = this.score;
			this.zyjzgScore = score //正式
			switch (stats) {
				case 1:
					this.getMax(this.getIndex(score))

					setTimeout(() => {
						this.postMsgApi(JSON.stringify(this.score), this.result, 1)
					}, 50)

					break;
				case 2:
					this.getZyjzg(score)
					setTimeout(() => {
						this.postMsgApi(JSON.stringify(this.score), this.result, 3)
					}, 50)
					break;
				case 3:
					this.getFinal(this.getmaxscore(this.score))
					setTimeout(() => {
						this.postMsgApi(JSON.stringify(this.score), this.result, 4)
					}, 50)
					break;
				case 4:
					this.getDyznMax(score)
					this.postMsgApi(JSON.stringify(this.score), this.result, 2)
					break;
				default:
					this.grownScore[0] = score[0] + score[1];
					this.grownScore[1] = score[2] + score[3];
					this.grownScore[2] = score[4] + score[5];
					this.getGrownMax(this.getIndex(this.grownScore), score)
					// this.drawYh(this.grownScore, this.score)
					setTimeout(() => {
						this.postMsgApi(JSON.stringify(this.score), this.result, 5)
					}, 50)
			}
			this.$vux.loading.show({
				text: '正在加载'
			})
		},
		methods: {
			swip() {
				let _this = this
				var mySwiper = new Swiper("#swiper1", {
					direction: 'horizontal',
					loop: false,
					autoplay: 5000,
					slidesPerView: "auto",
					centeredSlides: true,
					spaceBetween: 10,
					pagination: {
						el: '.swiper-pagination'
					},
					autoplay: false,
					observer: true,
					observeParents: true,
					autoplay: {
						delay: 50000000,
						disableOnInteraction: false
					}

				});
				mySwiper.on('slideChangeTransitionEnd', function() {
					_this.swiperIndex = mySwiper.activeIndex
					if (_this.types === 1) {
						_this.$nextTick(() => {
							_this.drawPie(_this.score, _this.icator)
						})
					} else if (_this.types === 4) {
						_this.$nextTick(() => {
							_this.drawPie(_this.score, _this.icatorxz)
						})
					} else if (_this.types === 5) {
						_this.$nextTick(() => {
							_this.drawYh(_this.grownScore, _this.score)
						})
					}


					

				});
			},
			//userId 不需要  saveSingle
			//test
			getFinal(abc) {
		
				var result = ['ISTJ型(执行者/检查员)', 'ISFJ型(保护者/社工)', 'ISTP型(操作者/演奏者)', 'ISFP型(作曲家/艺术家)', 'INFJ型(陪伴者/咨询师)',
					'INFP型(治疗师/导师)',
					'INTJ型(科学家/智多星)', 'INTP型(建筑师/设计师)', 'ESTJ型(监督者/督导)', 'ESFJ型(服务者/销售员)', 'ESTP型(创业者/实干家)', 'ESFP型(表演者/开心果)',
					'ENFJ型(教师/培训师)', 'ENFP型(倡导者/演说家)', 'ENTJ型(统帅/管理者)', 'ENTP型(策划者/发明家)'
				]

				if (result.indexOf(abc) === -1) {
					var newArr = result.filter(item => item.indexOf(abc[0]) > -1)
					var newArr1 = newArr.filter(item => item.indexOf(abc[1]) > -1)
					var newArr2 = newArr1.filter(item => item.indexOf(abc[2]) > -1)
					var newArr3 = newArr2.filter(item => item.indexOf(abc[3]) > -1)
					
					this.result = newArr3[0];
				
					this.resultTitleData.push(newArr3[0])
				}
			},
			getmaxscore(arr) {
		
				let adtas = arr;
				let abc = '';
				adtas[0].count > adtas[1].count ? abc += adtas[0].typr : abc += adtas[1].typr
				adtas[2].count > adtas[3].count ? abc += adtas[2].typr : abc += adtas[3].typr
				adtas[4].count > adtas[5].count ? abc += adtas[4].typr : abc += adtas[5].typr
				adtas[6].count > adtas[7].count ? abc += adtas[6].typr : abc += adtas[7].typr

				this.mbtiDatas = [{
						leftScore: adtas[0].count,
						leftType: adtas[0].typr,
						rightScore: adtas[1].count,
						rightType: adtas[1].typr
					},
					{
						leftScore: adtas[2].count,
						leftType: adtas[2].typr,
						rightScore: adtas[3].count,
						rightType: adtas[3].typr
					},
					{
						leftScore: adtas[6].count,
						leftType: adtas[6].typr,
						rightScore: adtas[7].count,
						rightType: adtas[7].typr
					},
					{
						leftScore: adtas[4].count,
						leftType: adtas[4].typr,
						rightScore: adtas[5].count,
						rightType: adtas[5].typr
					}
				]
				// console.log('this.mbtiDatas',this.mbtiDatas)
				return abc;
			},

			postMsgApi(jsonStr, result, stat) {
				saveSingle({
					"classify": stat,
					"parameter": jsonStr,
					"result": result,
					"type": 1,
					"userType": ls.get('userType')
				}).then(res => {
					if (res.code === '0') {

						this.postResultApi(stat, jsonStr, result)
					}
					// this.$vux.toast.text(res.message);
				}).catch((error) => {
					this.$vux.toast.text('服务器故障');
				})
			},
			postResultApi(stas, jsonStr, result) {
				getResult({
					"classify": stas,
					"parameter": jsonStr,
					"type": result
				}, true).then(res => {
					if (res.code === '0') {
						this.resulrData = res.data
						if(this.resulrData.length>1){this.swip()} 
						if (this.types === 1) {
							this.$nextTick(() => {
								this.drawPie(this.score, this.icator);
							})

						} else if (this.types === 4) {
							this.$nextTick(() => {
								this.drawPie(this.score, this.icatorxz)
							})
						} else if (this.types === 5) {
							this.$nextTick(() => {
								this.drawYh(this.grownScore, this.score)
							})

						}


					}
					this.$vux.loading.hide();
				}).catch((error) => {
					this.$vux.toast.text(error);
				})
			},
			getIndex(ary) {
				let max = Math.max.apply(null, ary);
				
				let index;
				let are = []
				for (var i = 0, len = ary.length; i < len; i++) {
					if (ary[i] == max) {
						index = i;
						are.push(i)
					}
				}
				return are;

			},
			getZyjzg(arrs) {
				let resultIndex = this.getIndex(arrs)
				
				let resules = ['利他主义', '美的追求', '创造发明', '智力刺激', '独立自主', '成就满足', '声望地位', '管理权力', '经济报酬', '安全稳定', '工作环境', '上司关系',
					'同事关系', '多样变化', '生活方式'
				]
				let str = "";
				for (var i in resultIndex) {
					str += resules[resultIndex[i]] + "+"
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				this.result = str

				this.zyjzgResult = resules
				this.resultTitleData = this.result.split("+");

			},
			getMax(arrs) {
				let resules = ['R型(现实型)', 'S型(社会型)', 'I型(研究型)', 'E型(企业型)', 'A型(艺术型)', 'C型(事务型)']
				let str = "";
				for (var i in arrs) {
					str += resules[arrs[i]] + "+"
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				this.result = str
				this.resultTitleData = this.result.split("+");

			},
			getGrownMax(index, score) {
				
				let str = "";
				for (var i = 0; i < index.length; i++) {

					switch (index[i]) {
						case 0:				
							score[0] > score[1] ? str += '家庭接纳-慈爱' + '+' : str += '家庭接纳-随意' + '+'
							break;
						case 1:							
							score[2] > score[3] ? str += '家庭回避-忽视' + '+' : str += '家庭回避-拒绝' + '+'
							break;
						default:			
							score[4] > score[5] ? str += '家庭过度关心-过度要求' + '+' : str += '家庭过度关心-过度保护' + '+'
	
					}
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				this.result = str
				this.resultTitleData = this.result.split("+");
			

			},
			getDyznMax(arrs) {
				let resultIndex = this.getIndex(arrs)

				let resules = ['言语-语言智能', '数理-逻辑智能', '视觉-空间智能', '自然-观察智能', '音乐-节奏智能', '身体-动觉智能', '人际-交际智能', '自我-内省智能']
				let str = "";
				for (var i in resultIndex) {
					str += resules[resultIndex[i]] + "+"
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				this.result = str

				this.zyjzgResult = resules
				this.resultTitleData = this.result.split("+");


			},
			drawYh(bigData, smData) {
				var chart1 = echarts.init(document.getElementById("echart"));
				var option = {
					calculable: true,
					series: [{
							name: '',
							type: 'pie',
							radius: [0, 100],

							// for funnel
							x: '40%',
							width: '40%',
							funnelAlign: 'right',
							max: 10,

							itemStyle: {
								normal: {
									label: {
										position: 'inner'
									},
									labelLine: {
										show: false
									}
								}
							},
							data: [{
									value: smData[0],
									itemStyle: {
										color: '#03A9F4'
									}
								},
								{
									value: smData[1],
									itemStyle: {
										color: '#4FC3F7'
									}
								},
								{
									value: smData[2],
									itemStyle: {
										color: '#FFB300'
									}

								}, ,
								{
									value: smData[3],
									itemStyle: {
										color: '#FFD54F'
									}

								},

								,
								{
									value: smData[4],
									itemStyle: {
										color: '#FF8A65'
									}

								}, ,
								{
									value: smData[5],
									itemStyle: {
										color: '#FFAB91'
									}

								}
							]

						},

						{
							name: '',
							type: 'pie',
							radius: [80, 100],
							x: '60%',
							width: '35%',		
							max: 10,			
							data: [{
									value: bigData[0],
									itemStyle: {
										color: '#ecfafc'
									}
								},
								{
									value: bigData[1],
									itemStyle: {
										color: '#fffbdc'
									}
								},
								{
									value: bigData[2],
									itemStyle: {
										color: '#fdf2f1'
									}
								}
							]
						}
					]
				};
				chart1.setOption(option);
			},

			drawPie(scores, indtas) {
				var charts = echarts.init(document.getElementById("echart"))
				var option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						x: 'center',
						data: ['']
					},

					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: true,
					polar: [{
						indicator: indtas,
						splitLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: '#EEEEEE' // 图表背景网格线的颜色
							}
						},
						radius: 60
					}],
					series: [{
						name: '',
						type: 'radar',
						symbol: "none", // 去掉图表中各个图区域的边框线拐点
						itemStyle: {
							normal: {
								color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
								lineStyle: {
									color: "#BDED84" // 图表中各个图区域的边框线颜色
								},
								areaStyle: {
									type: 'default',
									color: ["#BDED84"] // 图表背景网格的颜色
								}
							}
						},
						data: [{
							value: scores,
							name: '职业兴趣测试'
						}]
					}]
				}
				charts.setOption(option);

			},

			clcyes(score, indexs, stats) {
				this.tabNum = indexs + 1;

				switch (stats) {
					case "R":
					
						this.numberSet.numR += 1
						break;
					case "S":
						
						this.numberSet.numS += 1
						break;
					case "I":
						
						this.numberSet.numI += 1
						break;
					case "E":
						
						this.numberSet.numE += 1
						break;
					case "A":
						
						this.numberSet.numA += 1
						break;
					default:
					
						this.numberSet.numC += 1
				}
			},
			clcno(indexs) {
				this.tabNum = indexs + 1;
			},
		

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.mbti-box {
		width: 100%;
		height: auto;
		padding-bottom: 0.3rem;
		overflow: hidden;

		.mbti-bar {
			margin-top: 0.3rem;

			.barsp {

				b,
				i {
					font-size: 0.3rem;
					font-family: 'PingFangSC-Semibold';
					font-weight: 600;
					text-align: center;
				}

				b {

					color: rgba(34, 34, 34, 1);


				}

				i {

					color: @mainColor;

				}

				em {
					width: 2rem;
					height: 0.32rem;
					float: right;


					position: relative;
					background: rgba(250, 250, 250, 1);

					strong {
						width: 1rem;
						position: absolute;
						height: 0.32rem;
						background: rgba(204, 211, 224, 1);

					}

					.active {
						background: @mainColor;
					}
				}
			}

			.left {
				margin-right: 0.1rem;

				em {
					border-top-left-radius: 0.16rem;
					border-bottom-left-radius: 0.16rem;

					strong {
						right: 0;
						top: 0;
						border-top-left-radius: 0.16rem;
						border-bottom-left-radius: 0.16rem;
					}

				}
			}

			.right {
				margin-right: 0.1rem;

				em {
					border-top-right-radius: 0.16rem;
					border-bottom-right-radius: 0.16rem;

					strong {
						left: 0;
						top: 0;
						border-top-right-radius: 0.16rem;
						border-bottom-right-radius: 0.16rem;
					}
				}
			}
		}
	}

	.swipBoxWrap {
		margin-top: 0.2rem;
	}

	.pagination-box {
		width: 7.5rem;
		height: 0.5rem;
		padding: 0 0.3rem;
		box-sizing: border-box;

		.titlesp {
			font-size: 0.28rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(34, 34, 34, 1);
			line-height: 0.5rem;
			height: 0.5rem;
			line-height: 0.5rem;
		}

		.bullet-box {
			height: 0.5rem;

			.swiper-pagination {
				right: 0.3rem;

			}
		}
	}

	/deep/.swiper-pagination-bullet {
		margin-right: 5px;
	}

	/deep/.swiper-pagination-bullet-active {
		opacity: 1;
		background: @mainColor;
	}

	.top {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		padding: 0 0.3rem;
		box-sizing: border-box;

		.imgIcon {
			width: 0.4rem;
			height: 0.4rem;
		}

	}

	#echart {
		width: 100%;
		height: 5rem;
		margin: 0 auto;
		// transform: rotate(-90deg);
	}


	.outerBarBox {
		width: 100%;
		height: 10rem;
		margin-top: 0.4rem;
		overflow: hidden;
	}

	.test2bot {
		width: 100%;
		height: 0.5rem;

		.sp1 {
			width: 1.3rem;
			height: 0.5rem;
		}

		.sp2 {
			height: 0.5rem;

			.sp2_score {
				width: 100%;
				height: 0.5rem;
				line-height: 0.5rem;

				span {
					text-align: right;
					font-size: 0.24rem;
					font-weight: bold;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
	}

	.test2Box {
		width: 100%;
		height: 9rem;

		.sp1 {
			width: 1.3rem;

			span {
				display: block;
				text-align: center;
				width: 1.3rem;
				height: 0.6rem;
				line-height: 0.6rem;
				font-size: 0.24rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
			}
		}

		// 20 - 5rem 0.25rem

		.sp2 {
			height: auto;
			background: #EEEEEE;
			overflow: hidden;

			.sp2_2 {
				height: 0.6rem;
				overflow: hidden;
			}



			span {
				display: block;
				width: 2.5rem;
				height: 0.2rem;
				// background: linear-gradient(225deg, rgba(98, 178, 61, 1) 0%, rgba(168, 224, 99, 1) 100%);
				background: linear-gradient(225deg, rgba(98, 178, 61, 1) 0%, rgba(168, 224, 99, 1) 100%);
				border-radius: 0.1rem;
				opacity: 0.6;
				margin-top: 0.2rem;
			}
		}
	}

	.indResultWrap {
		width: 7.5rem;

		min-height: 100vh;
		height: auto;
		background: rgba(250, 250, 250, 1);
		overflow: hidden;
		// flex-direction: column;

		.toper {
			width: 100%;
			height: 1.5rem;

			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
		}

		.indResulWrap {
			width: 7.5rem;
			// height: 100%;
			min-height: 100%;
			height: auto;

			.result5Wrap {
				width: 100%;
				height: 2.1rem;
				// background: red;

				.coBgSp {
					margin-right: 0.15rem;
					// background: yellow;
					height: 2.1rem;
					border-radius: 0.2rem;

					i {
						display: block;
						font-size: 0.24rem;
						height: 0.7rem;
						font-weight: bold;
						color: rgba(102, 102, 102, 1);
						line-height: 0.7rem;
						text-align: center;
					}

					.cosp {
						display: block;
						width: 80%;
						height: 0.5rem;
						margin: 0 auto 0.15rem;
						text-align: center;

						em,
						b {
							font-size: 0.22rem;
							// font-weight: bold;
							color: rgba(255, 255, 255, 1);
							line-height: 0.5rem;
						}

						// em {}

						b {
							margin-left: 0.05rem;
						}

					}

				}

				// 				.coBgSp:nth-of-type(3){
				// 					
				// 				}
				.bgsp1 {
					background: rgba(224, 247, 250, 1);

					.sp1 {
						background: rgba(3, 169, 244, 1);
						box-shadow: 0px 0.04rem 0.1rem 0px rgba(79, 195, 247, 0.3);
						border-radius: 0.1rem;
					}

					.sp2 {
						background: rgba(129, 212, 250, 1);
						box-shadow: 0px 0.04rem 0.1rem 0px rgba(79, 195, 247, 0.3);
						border-radius: 0.1rem;
					}
				}

				.bgsp2 {
					background: rgba(255, 249, 196, 1);

					.sp1 {
						background: rgba(255, 179, 0, 1);
						box-shadow: 0px 0.04rem 0.1rem 0px rgba(255, 179, 0, 0.3);
						border-radius: 0.1rem;
					}

					.sp2 {
						background: rgba(255, 213, 79, 1);
						box-shadow: 0px 0.04rem 0.1rem 0px rgba(255, 197, 61, 0.3);
						border-radius: 0.1rem;
					}
				}

				.bgsp3 {
					background: rgba(251, 233, 231, 1);
					margin-right: 0;

					.sp1 {
						background: rgba(255, 138, 101, 1);
						box-shadow: 0px 0.04rem 0.1rem 0px rgba(255, 138, 101, 0.3);
						border-radius: 0.1rem;
					}

					.sp2 {
						background: rgba(255, 171, 145, 1);
						box-shadow: 0px 0.04rem 0.1rem 0px rgba(255, 138, 101, 0.3);
						border-radius: 0.1rem;
					}
				}
			}

			.resulWrap {
				width: 6.9rem;
				height: auto;
				position: relative;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
				margin: 0rem auto 0;
				z-index: 2;
				border-radius: 0.2rem;

				.resulbox {
					width: 100%;
					height: auto;
					padding: 0.3rem 0.4rem;
					box-sizing: border-box;

					.textResutTile {
						padding-bottom: 0.4rem;
						height: auto;
						width: 100%;
						text-align: center;

						.sp1 {
							font-size: 0.4rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.44rem;
						}


					}

					.titleBox {
						width: 6.1rem;
						height: 1.65rem;
						background: rgba(250, 250, 250, 1);
						border-radius: 0.1rem;
						overflow: hidden;

						i,
						b {
							display: block;
							text-align: center;

						}

						i {
							height: 0.44rem;
							font-size: 0.24rem;
							font-weight: bold;
							color: rgba(187, 187, 187, 1);
							line-height: 0.44rem;
							margin-top: 0.34rem;
						}

						b {

							font-size: 0.4rem;
							font-weight: bold;
							color: @mainColor;
							margin-top: 0.1rem;
						}
					}







				}

			}

			.resultTxtBox {
				width: 6.1rem;
				// height: 20rem;
				// min-height: 20rem;
				height: auto;
				margin: 0 auto;
				// background: yellow;
				padding: 0.2rem 0;

				.titlesp {
					display: block;
					height: 0.8rem;
					width: 100%;
					line-height: 0.8rem;
					border-bottom: 0.01rem solid rgba(238, 238, 238, 1);

					i {
						display: inline-block;
						width: 0.14rem;
						height: 0.25rem;
						background: @mainColor;
						border-radius: 0.1rem;
					}

					b {
						font-size: 0.34rem;
						margin-left: 0.15rem;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
						// line-height:0.8;
					}
				}

				.pBox {
					width: 100%;
					height: auto;
					min-height: 1rem;
					padding: 0.2rem 0;
					overflow: hidden;

					.pptitle {
						display: block;
						font-size: 0.26rem;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
						line-height: 0.6rem;
					}

					.pptitle:nth-of-type(2) {
						margin-top: 0.15rem;
					}

					.pp1 {
						font-size: 0.26rem;

						color: rgba(34, 34, 34, 1);
						line-height: 0.4rem;
					}
				}

			}
		}


	}
</style>
